import React, {Component} from 'react';
import {
  View,
  Image,
  TouchableOpacity,
  Text,
  ScrollView,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import QuanziConstants from '../quanzi/QuanziConstants';
import BaseComponent from '../common/BaseComponent';
import Config from '../../config';
import Platform from 'Platform';
import QuanziListView from '../quanzi/QuanziListView';
import QZ_QunliaoListView from '../quanzi/QZ_QunliaoListView';
import UserRequestSelfDataAction from '../../actions/user/UserRequestSelfDataAction';
import LoginCheckIsUserAction from '../../actions/login/LoginCheckIsUserAction';

import DataManager from '../../datas/DataManager';

const TABBAR = [QuanziConstants.TABBAR.quanzi, QuanziConstants.TABBAR.qunliao];

export default class QuanziView extends BaseComponent  {
  constructor(props) {
    super(props);
    this.state.isRefreshing = false;
    this.state.scrollEnabled = Platform.OS === 'ios';
    this.state.currentIndex = 0;

    this._scrollView = null;

    this._pageWidth = SizeUtils.getWindowSize().width;
    this._pageHeight = this.props.style[0].height - SizeUtils.translateDesignHeightToCode(80);
     this._authorization = this.props.pageData.routeData.authorization;
    this._clickTopBtnTimer = null;
    this.qunliaoListView = null;
  }

  componentWillUpdate(nextProps, nextState) {
    if(this._authorization != this.props.pageData.routeData.authorization) {
      this._authorization = this.props.pageData.routeData.authorization;
      this._requestData();
    }
  }

  componentDidMount() {
    this._requestData();
  }

  _requestData() {
    
  }

  render() {
    return(
      <View style={{paddingTop:Config.paddingTop, backgroundColor:"#00000000"}}>
        {this._renderNavigationBar()}
        {this._renderTopButton()}
        {this._renderScrollView()}
      </View>
    )
  }

  _renderScrollView() {
    return(
      <ScrollView style={{width:this._pageWidth,
          height:this._pageHeight}}
        ref={(ref) => this._scrollView = ref}
        horizontal={true}   // 水平方向
        showsHorizontalScrollIndicator={false}  // 水平指示器
        showsVerticalScrollIndicator={false}    // 垂直指示器
        pagingEnabled={true}    // 开启分页功能
        alwaysBounceHorizontal={false} //弹性拉动一截
        onScroll={this._onScroll.bind(this)}
        scrollEnabled={this.state.scrollEnabled}
      >
          {this._getPage(0)}
          {this._getPage(1)}
      </ScrollView>
    )
  }

  _onScroll(event) {
    let x = event.nativeEvent.contentOffset.x;
    let index = Math.round(x / this._pageWidth);
    console.log("round", index, x / this._pageWidth, x, this._pageWidth);
    if(this.state.currentIndex != index) {
      this.setState({
        currentIndex:index,
      })
    }
  }
   _renderNavigationBarLeftButton() {
    return (
      <TouchableOpacity onPress={this._onPressNavigationBarLeftBtn.bind(this)} disabled={!this.props.pageData.showLeftButton}
          style={{width:SizeUtils.translateDesignWidthToCode(200), paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          }}>
      </TouchableOpacity>
    )
  }

  _changeTab(index) {
    this.setState({
      currentIndex:index,
    });
  }

  _getPage(index) {
    if(index == 0) {

      return(
        <QuanziListView style={{height:this._pageHeight}} noEmpty = {true}
            pageData = {this.props.pageData}/>
      )
    }
    else{
      return(
        <QZ_QunliaoListView ref={(ref) => {
            this.qunliaoListView = ref
           }}
           style={{height:this._pageHeight}} noEmpty = {true}
            pageData = {this.props.pageData} requestType={1}/>
      )
    }
  }

  _renderTopButton() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.translateDesignHeightToCode(80),
          flexDirection:"row", justifyContent:"center", alignItems:"center", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          borderColor:"#eeeeee", backgroundColor:"#ffffff"}}>
        {this._getButton(0)}
        {this._getButton(1)}
      </View>
    )
  }

  _getButton(index) {
    return(
      <TouchableOpacity onPress={()=>this._onPressBtn(index)} style={{width:SizeUtils.translateDesignWidthToCode(162),
          height:SizeUtils.translateDesignHeightToCode(80), flexDirection:"column", justifyContent:"center", alignItems:"center",
          }}>
        <View style={{height:SizeUtils.translateDesignHeightToCode(76), justifyContent:"center", alignItems:"center",}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:index == this.state.currentIndex ? "#db3132": "#666666"}}>
            {TABBAR[index].name}
          </Text>
        </View>
        <View style={{borderColor:"#db3132", borderBottomWidth:index == this.state.currentIndex ? SizeUtils.translateDesignNumToCode(5) : 0,
          width:SizeUtils.translateDesignWidthToCode(60), height:SizeUtils.translateDesignHeightToCode(5)}}>
        </View>
      </TouchableOpacity>
    )
  }

  _onPressBtn(index) {
    if(this._clickTopBtnTimer) {
      return;
    }
    this._clickTopBtnTimer = setTimeout(() => {
      this.setState({
        scrollEnabled:Platform.OS === 'ios',
      });
      this._clearClickTopBtnTimer();
    }, 500);
    this.setState({
      currentIndex:0,
      scrollEnabled:true,
    }, ()=>this._scrollView.scrollTo({x:index * this._pageWidth}));
  }

  _clearClickTopBtnTimer() {
    this._clickTopBtnTimer && clearTimeout(this._clickTopBtnTimer)
    this._clickTopBtnTimer = null;
  }

  _renderNavigationBarTitle() {
    return(
      <View style={{height:SizeUtils.translateDesignNumToCode(30)}}>
        <Text style={{textAlign:'center',
          fontSize:SizeUtils.translateFontSizeToCode(36),
          color:this._fontColor, fontFamily:'STHeitiSC-Medium',
        }}> {"圈子"} </Text>
      </View>
    )
  }

  _renderNavigationBarLeftButtonContent() {

  }

  _onPressNavigationBarLeftBtn() {

  }
};
